<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>注册界面</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>
<div id="container" >
        <div class="page-container">
            <h1>注册界面</h1>
            <form id="form" >
            	 <input type="text" name="username"  placeholder="用户名">
                <input type="password" name="pwd"  placeholder="密码">
                <input type="text" name="email" id="email" placeholder="邮箱">
                <input type="text" name="phone"  placeholder="电话">
                <input type="text" name="address"  placeholder="地址">
                <button type="button" onclick="register()">点击注册</button>
               
            </form>

        </div>
        </div>

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/supersized.3.2.7.min.js"></script>
        <script src="assets/js/supersized-init.js"></script>
        <script src="assets/js/scripts.js"></script>
		

		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    </body>
<script type="text/javascript">

function register(){
	$.ajax({
		url:"/customer/register",
		type:"get",
		data:$("#form").serialize(),
		dataType:"json",
	success:function(data){
		if(data.code==250){
			alert(data.message);
		}else{
		alert("注册成功，请接收邮件激活");
		location.href="/customer/active"+"?email="+$("#email").val();
		//location.href="/login.html";
		}
	},
	error:function(error){
		console.log(error.responseJSON.message)
	}
	});
}

jQuery.validator.addMethod("isPhone", function(value, element) {
    var length = value.length;
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
   }, "请填写正确的手机号码");

$(function(){
	$("#form").validate({
		rules:{
			username:{
				required:true,
				rangelength:[6,32]
			},
	pwd:{
		required:true,
		rangelength:[6,32]
	},
	email:{
		email:true
	},
	phone : {
        isPhone:true
    },
    address:{
    	required:true,
    	rangelength:[6,50]
    }
   

		},
		messages:{
		username:{
			required:"请输入您的账号",
			rangelength:"账号长度须在6-32位之间"
		},
		pwd:{
			required:"请输入您的密码",
			rangelength:"密码长度须在6-32位之间"
		},
		email:{
			email:"请输入正确的电子邮箱"
		},
		phone : {
	        isPhone:"请填写正确的手机号码"
	    },
	    address:{
	    	required:"请输入您的地址",
	    	rangelength:"地址长度须在6-50位之间"
	    }
		}
		})
	});

</script>
</html>

